<template>
  <footer>
    <ul>
      <router-link to="/home" custom v-slot="{ navigate, isActive }">
        <li @click="navigate" :class="isActive ? 'myActive' : ''">
          <i class="iconfont icon-home"></i>首页
        </li>
      </router-link>
      <router-link to="/cinema" custom v-slot="{ navigate, isActive }">
        <li @click="navigate" :class="isActive ? 'myActive' : ''">
          <i class="iconfont icon-movies"></i>影院
        </li>
      </router-link>
    </ul>
  </footer>
</template>

<script>
// 引入图库
import '@/assets/font_3180509_lh96vsafsw/iconfont.css'
export default {}
</script>

<style scoped lang='scss'>
$color: #ff5f16;
.myActive {
  color: $color;
}
footer {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  background: #fff;
  z-index: 99999999;
  ul {
    width: 100%;
    height: 48px;
    display: flex;
    list-style: none;
    li {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      i {
        font-size: 20px;
      }
    }
  }
}
</style>
